<template>
  <div>
    <el-form
      ref="shFormData"
      :model="shFormData"
      :rules="shFormDataRules"
      label-width="80px"
    >
      <el-form-item
        label="处理措施"
        :label-width="formLabelWidth5"
        prop="gClcs"
      >
        <el-select
          v-model="shFormData.gClcs"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in gClcsList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="处理期限"
        :label-width="formLabelWidth5"
        prop="gTimelimit"
      >
        <el-select
          v-model="shFormData.gTimelimit"
          @change="gTimelimitChange"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in gTimelimitList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="到期时间" :label-width="formLabelWidth5">
        <el-input
          v-model="shFormData.gDueTime"
          placeholder="请输入处理期限"
          autocomplete="off"
          disabled
        ></el-input>
      </el-form-item>

      <el-form-item
        label="处理说明"
        :label-width="formLabelWidth5"
        prop="gDealNote"
      >
        <el-input
          type="textarea"
          v-model="shFormData.gDealNote"
          class="resizeNone"
          placeholder=""
        ></el-input>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button type="success" @click="Submit('shFormData')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { tzzCommonSubmit, setDispose, tzzPatrolSave } from '@/api/grid'
export default {
  name: '',
  components: {},
  props: {
    formData1: {
      type: Object,
      default: () => {},
    },
    HandleForm: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      formLabelWidth5: '150px',

      gClcsList: [
        {
          typeId: '1',
          typeName: '停工',
        },
        {
          typeId: '2',
          typeName: '恢复原貌',
        },
        {
          typeId: '3',
          typeName: '补办手续',
        },
      ],
      gTimelimitList: [
        {
          typeId: '1',
          typeName: '3天',
        },
        {
          typeId: '2',
          typeName: '5天',
        },
        {
          typeId: '3',
          typeName: '10天',
        },
      ],
      shFormData: {
        gClcs: '',
        gTimelimit: '',
        gDqsj: '',
        gDueTime: '',
        gDealNote: '',
      },
      shFormDataRules: {
        gTimelimit: [
          { required: true, message: '请输入处理措施', trigger: 'blur' },
        ],
        gClcs: [{ required: true, message: '请输入整改期限', trigger: 'blur' }],
      },
    }
  },
  computed: {},
  watch: {
    // shFormData: {
    //   //深度监听，可监听到对象、数组的变化
    //   handler(val, oldVal) {
    //     if (val.gTimelimit === '1') {
    //       //   this.shFormData.gDqsj = '3天'
    //       //   console.log(this.shFormData.gDqsj)
    //       this.shFormData.gDqsj = this.afterDays(3)
    //     } else if (val.gTimelimit === '2') {
    //       this.shFormData.gDqsj = '5天'
    //       //   console.log(this.shFormData.gDqsj)
    //       this.shFormData.gDqsj = this.afterDays(5)
    //     } else if (val.gTimelimit === '3') {
    //       this.shFormData.gDqsj = '10天'
    //       //   console.log(this.shFormData.gDqsj)
    //       this.shFormData.gDqsj = this.afterDays(10)
    //     }
    //   },
    //   deep: true, //true 深度监听
    // },
  },
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {
    //   监听处理期限切换
    gTimelimitChange() {
      if (this.shFormData.gTimelimit === '1') {
        this.shFormData.gDqsj = this.afterDays(3)
        this.shFormData.gDueTime = this.afterDays(3)
      } else if (this.shFormData.gTimelimit === '2') {
        this.shFormData.gDqsj = this.afterDays(5)
        this.shFormData.gDueTime = this.afterDays(5)
      } else if (this.shFormData.gTimelimit === '3') {
        this.shFormData.gDqsj = this.afterDays(10)
        this.shFormData.gDueTime = this.afterDays(10)
      }
    },
    // //计算days天后的日期
    afterDays(num) {
      // 设置日期，当前日期的前num天
      //   let myDate = new Date('2021-03-27') // 获取今天日期
      let myDate = new Date() // 获取今天日期
      //   myDate.setDate(myDate.getDate() - (num - 1))
      myDate.setDate(myDate.getDate() + num)
      let dateArray = []
      let myMonth = myDate.getMonth() + 1
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = '0' + myMonth
      }
      let myDates = myDate.getDate()
      if (myDates >= 0 && myDates <= 9) {
        myDates = '0' + myDates
      }
      let dateTemp
      let flag = 1
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + '-' + myMonth + '-' + myDates
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }
      return dateArray[0]
    },
    // 处理表单保存
    Submit(shFormData) {
      this.$refs[shFormData].validate((valid) => {
        if (valid) {
          //   console.log(this.shFormData)
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          // console.log(this.formData1)
          //   console.log(this.shFormData)
          //   Object.assign(this.shFormData, formData1)
          this.formData1.gClcs = this.shFormData.gClcs
          this.formData1.gTimelimit = this.shFormData.gTimelimit
          this.formData1.gDqsj = this.shFormData.gDqsj
          this.formData1.gDueTime = this.shFormData.gDueTime
          this.formData1.gDealNote = this.shFormData.gDealNote
          // this.formData1.button = '1'
          // console.log(this.formData1)
          if (this.formData1.dataMap === 'Y') {
            this.formData1.dataMap = { pass: 'Y' }
            this.formData1.button = '1'
            setDispose(this.formData1)
              .then((res) => {
                loading.close()
                this.$message({
                  message: res.message,
                  type: 'success',
                })
                //   console.log(res)
                this.$emit('toBack')
                location.reload()
                this.shFormData = {}
              })
              .catch((err) => {
                loading.close()
                console.log(err)
              })
          } else if (this.formData1.dataMap === 'UP') {
            this.formData1.dataMap = { pass: 'UP' }
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            })

            tzzPatrolSave(this.formData1)
              .then((res) => {
                loading.close()
                this.$message({
                  message: res.message,
                  type: 'success',
                  duration: '6000',
                })
                this.$emit('Handle')
                this.$emit('toBack')
                this.shFormData = {}
              })
              .catch((err) => {
                console.log(err)
                loading.close()
              })
          }
          // 村直接处理
          else if (this.formData1.button === '1') {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            })
            // console.log(this.formData1)
            tzzPatrolSave(this.formData1)
              .then((res) => {
                loading.close()
                this.$message({
                  message: res.message,
                  type: 'success',
                  duration: '6000',
                })
                this.$emit('Handle')
                this.$emit('toBack')
                this.shFormData = {}
                this.$router.push({ path: '/dailyOffice' })
              })
              .catch((err) => {
                console.log(err)
                loading.close()
              })
          }
          // 公众上传的处理
          else {
            this.formData1.button = '1'
            tzzCommonSubmit(this.formData1)
              .then((res) => {
                loading.close()
                this.$message({
                  message: res.message,
                  type: 'success',
                })
                //   console.log(res)
                this.$emit('toBack')
                location.reload()
                this.shFormData = {}
              })
              .catch((err) => {
                loading.close()
                console.log(err)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
</style>
